<template>
  <div id="app">
    <el-dialog :visible="roleShow" title="权限分配" @close="closeDialog">
      <el-checkbox-group v-model="roleids">
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">
          {{ item.name }}
        </el-checkbox>

      </el-checkbox-group>
      <template #footer>  <el-row type="flex" justify="center">
        <el-button size="mini" @click="closeDialog">取消</el-button>
        <el-button size="mini" type="primary" @click="submitRolesAccess">提交</el-button>
      </el-row></template>
    </el-dialog>
  </div>
</template>
<script>
import { getroleList } from '@/api/settings'
import { getUserInfoDetailApi } from '@/api/user'
import { assignROles } from '@/api/employees'
export default {
  name: 'RoleDialog',
  props: {
    roleShow: Boolean,
    roleId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      roleList: [],
      roleids: []
    }
  },
  created() {
    this.getRole()
  },
  methods: {
    async submitRolesAccess() {
      await assignROles({ id: this.roleId, roleIds: this.roleids })
      this.closeDialog()
      this.$message.success('提交成功')
    },
    async getRole() {
      const { rows } = await getroleList()
      this.roleList = rows
    },
    closeDialog() {
      this.$emit('closeROlesDialog')
    },
    async getCurrentId(id) {
      const { roleIds } = await getUserInfoDetailApi(id)
      this.roleids = roleIds || []
    }
  }
}
</script>
<style lang='scss' scoped></style>
